import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import store from '../redux/store'

export default function City () {
  const [list] = useState(["北京", "上海", "广州", "深圳"])
  let navigator = useNavigate()
  return (
    <div>
      City
      <ul>
        {
          list.map(item => <li key={item} onClick={() => {
            store.dispatch({
              type: "change-city",
              payload: item
            })
            navigator(`/cinemas`)
          }}>{item}</li>)
        }
      </ul>
    </div>
  )
}
